<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<script src="http://o.aolcdn.com/dojo/1.5/dojo/dojo.xd.js" type="text/javascript" djConfig="parseOnLoad:true"></script>
		<script type="text/javascript">
			dojo.require("dojo.parser");
			dojo.require("dijit.form.Button");
			dojo.require("dijit.form.TextBox");
			dojo.require("dijit.TitlePane");
			dojo.require("dijit.Dialog");
			dojo.require("dijit.form.DateTextBox");
			dojo.require("dojox.widget.Toaster");
			dojo.require("dijit.form.ComboBox");
		</script>
		<script type="text/javascript">
			dojo.addOnLoad( function( ) {
				var registerDialog = new dijit.Dialog( {
					id		: "userManagementDialog",
					title 	: "New User Registration",
					href 	: "/FinalProject/registerUser.jsp"
				});
				dojo.byId( "registerButton").onclick = function( ) {
					registerDialog.refresh( );
					registerDialog.show( );
				};
				registerDialog.onLoad = function( e) {
					dijit.byId( "dlgResetButton").onClick = resetNewUserDialog;
					dijit.byId( "dlgSubmitButton").onClick = submitNewUserDialog;
				};
			});

			/*
				Just need to clean form and close dialog window
			*/
			function resetNewUserDialog( ) {
				dojo.byId( "userForm").reset( );
				dijit.byId( "userManagementDialog").hide( );
			}
			
			/*
				Send AJAX request to store user details within datbase
			*/
			function submitNewUserDialog( ) {
				if ( !dijit.byId( "userLogin").value ||
					  !dijit.byId( "userPassword").value ||
					  !dijit.byId( "userPasswordApproved").value ||
					  !dijit.byId( "firstName").value ||
					  dijit.byId( "userLogin").value.length == 0 ||
					  dijit.byId( "userPassword").value.length == 0 ||
					  dijit.byId( "userPasswordApproved").value.length == 0 ||
					  dijit.byId( "firstName").value.length == 0 ) {
			        dijit.byId('toaster').setContent('You need to fill all marked fields.', 'fatal');
			        dijit.byId('toaster').show();							
			        return;
				}
				if ( dijit.byId( "userPasswordApproved").value != dijit.byId( "userPassword").value) {
			        dijit.byId('toaster').setContent('Password was not matched. Please type again.', 'fatal');
			        dijit.byId('toaster').show();
			        return;							
				}
				dojo.xhrPost( {
					url : "/FinalProject/userRegistration",
					content : { userOp: "user_login_aviability", login : dijit.byId( "userLogin").value},
					handleAs : "text",
					load : function( data) {
						console.log( data);
						console.log( data == "ERROR");
						if ( data == "ERROR") {
					        dijit.byId('toaster').setContent('Login is busy, please choose other.', 'fatal');
					        dijit.byId('toaster').show();							
							return;
						}
						dojo.xhrPost( {
							form : "userForm",
							load : function( data, ioArgs) {
								if ( data == "ERROR") {
							        dijit.byId('toaster').setContent('Login is busy, please choose other.', 'fatal');
							        dijit.byId('toaster').show();							
									return;
								}
						        dijit.byId('toaster').setContent('User was sucessefuly added.', 'fatal');
						        dijit.byId('toaster').show();	
								resetNewUserDialog( );						
							},
							error : function( err, ioArgs) {
						        dijit.byId('toaster').setContent('Login is busy, please choose other.', 'fatal');
						        dijit.byId('toaster').show();							
							}
						});
					},
					error : function( ) {
				        dijit.byId('toaster').setContent('Login is busy, please choose other.', 'fatal');
				        dijit.byId('toaster').show();							
						return;
					}
				});
			}
		</script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/soria/soria.css" />
	
	<style type="text/css">
		  @import "/FinalProject/style/inventory.css";
	</style>
	<title>Login page</title>
  </head>
  <body class="soria" style="background:lightgray">
  <div dojoType="dojox.widget.Toaster" id="toaster" positionDirection="tr-left">
	</div>
  	<center>
	  	<table>
	  		<tr>
	  			<td>
					<div dojoType="dijit.TitlePane" title="Secure application login" closable="false" toggleabl="false">
					    <form method="post" action='<%= response.encodeURL("j_security_check") %>' >
					    	<fieldset>
					    		<legend>
					    			Enter your credentials
					    		</legend>
							      <table cellspacing="3">
							        <tr>
							          <th align="right">
							          	<label>Username:</label>
							          </th>
							          <td align="left">
							          	<input type="text" name="j_username" dojoType="dijit.form.TextBox" />
							          </td>
							        </tr>
							        <tr>
							          <th align="right">
							          	<label>Password:</label>
							          </th>
							          <td align="left">
							          	<input type="password" name="j_password" dojoType="dijit.form.TextBox"/>
							          </td>
							        </tr>
							        <tr>
							          <th align="right">&nbsp;</th>
							          <td align="right">
							          	<button type="button" dojoType="dijit.form.Button" id="registerButton">Register</button>
							          	<button type="submit" dojoType="dijit.form.Button">Log In</button>
							          </td>
							        </tr>
							      </table>
							</fieldset>
					    </form>
					</div>
				</td>
			</tr>			    
		</table>
	</center>
  </body>
</html>
